<template>
  <div class="details">
    <van-nav-bar
  title="商品详情页"
  left-arrow
  @click-left="$router.push('/home')"
/>
<van-swipe  :autoplay="2000"  @change="onChange">
  <van-swipe-item v-for="item in detailImg" :key="item.file_id">
    <img style="width:100%; height:100%;" :src="item.external_url" alt="">
    </van-swipe-item>
  <template #indicator>
    <div class="custom-indicator">{{ current +1   }}/{{detailImg.length}}</div>
  </template>
</van-swipe>
<van-cell-group>
  <van-cell    >
    <template #title >
    <span  class="spanone" > ￥{{pagedata.line_price_min}}</span>
    <span  class="spantwo" > ￥{{pagedata.line_price_max}}</span>
    <span  class="spanfour" > 已售{{pagedata.goods_sales}}件</span>
  </template>
      <template #label >
    <span  class="spanthree" > {{pagedata.goods_name}}</span>
  </template>
  </van-cell>
</van-cell-group>
<van-notice-bar mode="link"  @click="showPopup">
    <template  >

        <div>
            <span class="spanone"><van-icon name="passed" />七天无理由</span>
            <span class="spantwo"><van-icon name="passed" />48小时发货</span>
        </div>
  </template>
</van-notice-bar>
<van-popup closeable v-model="show"  position="bottom" :style="{ height: '45%' }" >
    <span class="spanfour">服务</span>
    <div><p class="spanone"><van-icon name="passed" />七天无理由</p>
    <p class="spanthree">满足相应条件时,消费者可申请7天无理由退货</p></div>
    <div><p class="spantwo"><van-icon name="passed" />48小时发货</p>
    <p  class="spanthree">下单后48小时之内发货</p></div>
</van-popup>
<div class="appps"></div>
<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服"  />
  <van-goods-action-icon icon="cart-o" text="购物车" />
  <van-goods-action-button type="warning" text="加入购物车" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
  </div>
</template>

<script>
import { HomeDate } from '@/api/details'
export default {
  name: 'detailsPage',
  data () {
    return {
      detailImg: [],
      current: 0,
      pagedata: {},
      show: false
    }
  },
  created () {
    this.detailsfn()
  },
  methods: {
    showPopup () {
      this.show = true
    },
    async  detailsfn () {
      const res = await HomeDate(this.$route.query.GoodId)
      this.detailImg = res.data.detail.goods_images
      this.pagedata = res.data.detail
      console.log(res.data.detail)
    //   console.log(goods_name)
    },
    onClickLeft () {

    },
    onChange (index) {
      this.current = index
    }
  }
}
</script>

<style lang='less' scoped>
    /deep/.van-nav-bar{
  height: 40px;
  .van-nav-bar__title{
    color: #000;

    font-size: 16px;
    line-height: 25px;
    font-weight: 700;
  }
    .van-icon-arrow-left{
        color: #000;
        font-size: 25px;
    }
}
  .my-swipe .van-swipe-item {
    margin-top: 20px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 375px;
    background-color: #39a9ed;

  }
    .custom-indicator {
    position: absolute;
    right: 20px;
    bottom: 40px;
    padding: 2px 5px;
    width: 30px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    text-align: center;
    color: #fff;
  }
  .van-cell{
    margin-top: 20px;
    position: relative;
    height: 95px;
    .spanone{
        color: red;
        font-size: 20px;
    }
    .spantwo{
text-decoration:line-through;
color: #aaa;
    }
    .spanthree{
        font-size: 16px;
        color: #000;
             display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2; /* 控制显示的行数 */
     line-height: 1.2;
    }
    .spanfour{
        position: absolute;
        right: 10px;
        top: 10px;
        width: 100px;
        height: 30px;
        font-size: 12px;
        color: #aaa;
    }
  }
  .van-notice-bar{
    background-color: #fafafa;
    .spanone{
        color: #000;
        .van-icon{
            color: red;
            margin-right: 10px;
        }
    }
      .spantwo{
        margin-left: 30px;
        color: #000;
        .van-icon{
            color: red;
            margin-right: 10px;

        }
    }

  }
  /deep/.van-notice-bar__right-icon{
        color: #000 !important;
    }
    .van-popup{
        .spanfour{
        width: 375px;
        height: 30px;
        line-height: 60px;
        margin-left: 160px;
    }
        .spanone{
            margin-left: 10px;
              color: #000;
              color: #666;
            font-size: 14px;
        .van-icon{
            color: red;
            margin-right: 10px;
        }
        }
        .spantwo{
        margin-left: 10px;
        color: #000;
        color: #666;
            font-size: 14px;
        .van-icon{
            color: red;
            margin-right: 10px;

        }

    }
    .spanthree{
        margin-top: -5px;
            margin-left: 40px;
            color: #666;
            font-size: 14px;
        }
    }
  .appps{
    height: 1000px;
  }

</style>
